<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form';

import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@vben/locales';

import {
  Button,
  Checkbox,
  Form,
  FormItem,
  Input,
  InputPassword,
  message,
} from 'ant-design-vue';

import { getCaptchaImage, userRegister } from '#/api';

const captchaImage = ref('');
const router = useRouter();

const goLogin = () => router.replace('/auth/login');

const refreshCaptchaImage = () => {
  getCaptchaImage().then((res) => {
    userRegisterData.uuid = res.data.uuid;
    captchaImage.value = `data:image/png;base64,${res.data.img}`;
  });
};

refreshCaptchaImage();

const userRegisterData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  code: '',
  uuid: '',
  remember: true,
});

function onFinish(values: typeof userRegisterData) {
  userRegister(values).then(({ data: { code, msg } }) => {
    if (code === 200) {
      message.success({
        content: '恭喜你注册成功',
        onClose() {},
      });
      goLogin();
    }
    if (code === 500) {
      message.error(msg);
      refreshCaptchaImage();
    }
  });
}

const VaildataRules: Record<string, Rule[]> = {
  username: [
    {
      required: true,
      trigger: 'blur',
      min: 5,
      max: 20,
    },
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      min: 5,
      max: 20,
    },
  ],
  confirmPassword: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
  uuid: [
    {
      required: true,
      trigger: 'blur',
    },
  ],
};
</script>

<template>
  <div>
    <h1 class="mb-4 text-[28px]">
      {{ $t('authentication.createAnAccount') }} 🚀
    </h1>
    <Form :model="userRegisterData" :rules="VaildataRules" @finish="onFinish">
      <!-- 用户名 -->
      <FormItem name="username" label="用户名">
        <Input
          v-model:value="userRegisterData.username"
          placeholder="请输入用户名"
        />
      </FormItem>
      <!-- 密码 -->
      <FormItem name="password" label="密码">
        <InputPassword
          v-model:value="userRegisterData.password"
          placeholder="请输入密码"
        />
      </FormItem>
      <!-- 确认密码 -->
      <FormItem name="confirmPassword" label="确认密码">
        <InputPassword
          v-model:value="userRegisterData.confirmPassword"
          placeholder="请确认密码"
        />
      </FormItem>
      <!-- 验证码 -->
      <FormItem name="code" label="验证码">
        <div class="flex gap-2">
          <Input v-model:value="userRegisterData.code" placeholder="验证码" />
          <img
            class="h-[32px]"
            :src="captchaImage"
            alt=""
            @click="refreshCaptchaImage"
          />
        </div>
      </FormItem>
      <FormItem name="uuid" class="hidden">
        <Input :value="userRegisterData.uuid" />
      </FormItem>
      <!-- 记住密码 -->
      <FormItem name="remember">
        <Checkbox v-model:checked="userRegisterData.remember">
          记住密码
        </Checkbox>
      </FormItem>
      <!-- 提交表单 -->
      <FormItem>
        <Button type="primary" html-type="submit" block>提交</Button>
      </FormItem>
      <div class="mt-4 text-center text-sm">
        {{ $t('authentication.alreadyHaveAccount') }}
        <span class="vben-link text-sm font-normal" @click="goLogin">
          {{ $t('authentication.goToLogin') }}
        </span>
      </div>
    </Form>
  </div>
</template>

<style scoped>
:deep(.ant-form-item-label) {
  display: none;
}
</style>
